import React, { Component, Fragment } from "react";
import { inject, observer } from "mobx-react";
import { withRouter, Link } from 'react-router-dom';
import { SearchBar, Button, ActivityIndicator, tools, Icon, Popover } from 'weaver-mobile';
import { ListViewPage, DocumentTitle } from "weaver-mobile-page";
import ResonModal from "./resonModal";

const { getLabel } = tools;
const Item = Popover.Item;

@inject('docExchangeStore')
@withRouter
@observer
class Main extends Component {
  static defaultProps = {
    prefixCls: "odocExchange-checkReceive",
  }

  constructor(props) {
    super(props);
    this.state = {
      popVisible: false
    }
  }

  componentWillUnmount() {
    const { docExchangeStore } = this.props;
    const { setState, selectDetailNone } = docExchangeStore;
    setState({
      selectedDetailRowKeys: [],
      showDetailCheck: false
    });
    selectDetailNone();
  }

  render() {
    const { docExchangeStore, location: { pathname, query }, history } = this.props;
    const { showDetailCheck, selectedDetailRowKeys, isSelectedDetailAll, setState, loading, selectDetailNone, selectDetailALL, currentName,
      modalVisible, btnType, reasonCheck, textareaValue, getSendDocinfo } = docExchangeStore;
    const datas = [
      { match: /^\/docExchange\/checkReceiveDoc/i, title: () => getLabel('', "查看收文情况") },
    ];
    return (<div className='odocExchange-checkReceive' >
      <DocumentTitle data={datas} defaultTitle="" />
      <SearchBar
        className="search-select"
        placeholder={getLabel('', '请输入关键字')}
        showExtraButton
        // defaultValue = {getLabel('','请输入关键字')}
        extraButton={[
          {
            key: 'drop',
            show: <Popover mask
              overlayClassName="fortest"
              overlayStyle={{ color: 'currentColor' }}
              visible={this.state.popVisible}
              placement="bottomRight"
              overlay={[
                (<Item key="docReport" value="scan" data-seed="logId">{getLabel('', '批量撤销')}</Item>)
              ]}
              align={{
                overflow: { adjustY: 0, adjustX: 0 },
                offset: [0, 0],
              }}
              onVisibleChange={this.handleVisibleChange}
              onSelect={this.onSelect}
            >
              <div style={{
                height: '100%',
                padding: '12px 15px',
                display: 'flex',
                alignItems: 'cssenter',
              }}
              >
                <span style={{border: '1px solid #ddd', marginRight: 10}} ></span>
                <Icon key="ellipsis" type="ellipsis" />
              </div>
            </Popover>
          },
        ]}
        onExtraButtonClick={(key) => { this.setState({ popVisible: true }) }}
        onSubmit={getSendDocinfo}
      />
      <div className='docTitle' >
        <span> {currentName} </span>
      </div>
      <div style={{ height: `calc(100% - 90px)` }}>
        {showDetailCheck && <div className="list-selectedMsg" >
          <span className="selectedMsg-cancel" onClick={() => {
            setState({
              selectedDetailRowKeys: [],
              showDetailCheck: false
            });
            selectDetailNone();
          }}>{getLabel(31129, '取消')}</span>
          <span>{getLabel(500274, "已选择")}{" " + selectedDetailRowKeys.length + " "}{getLabel('', "个单位")}</span>
          <span className="selectedMsg-all" onClick={() => {
            isSelectedDetailAll ? selectDetailNone() : selectDetailALL()
          }}> {isSelectedDetailAll && getLabel(31129, '取消')}{getLabel(556, '全选')}</span>
        </div>}

        {this.getTableList()}
        {loading && <ActivityIndicator
          toast
          text={getLabel(500408, "加载中...")}
          animating={loading}
        />}
        {this.getBatchBtn()}
      </div>
      {modalVisible && <ResonModal modalVisible={modalVisible} btnType={btnType} setState={setState} reasonCheck={reasonCheck} textareaValue={textareaValue} />}
    </div>);
  }

  getTableList = () => {
    const { docExchangeStore } = this.props;
    const { checkReceiveList, showDetailCheck, loading } = docExchangeStore;
    const items =
      <div style={{ height: showDetailCheck ? `calc(100% - 90px)` : `calc(100% - 45px)`, overflow: 'hidden' }}>
        <ListViewPage.Normal
          store={checkReceiveList}
          rowKey='randomFieldId'
          getTemplate={this.getTemplate}
          // onRowClick={(rowData) => this.forwardPage(rowData)}
          showCheck={showDetailCheck}
          onRowSelect={(selectedDetailRowKeys,c) => this.onRowSelect(selectedDetailRowKeys,c)}
        />
      </div>
    return items;
  }
  getTemplate = () => {
    const { docExchangeStore, prefixCls } = this.props;
    const { selectedTab } = docExchangeStore;
    const sendTemplate = {
      default: [
        {
          key: 'col2',
          configs: [
            {
              key: 'row1',
              render(item) {
                return (
                  <div>
                    <span>{getLabel('', '单位名称') + "："}</span>
                    <span className={`${prefixCls}-itemColor`} > {item.receiveunitnamespan} </span>
                  </div>
                )
              },
              style: { margin: "5px 0" }
            },
            {
              key: 'row2',
              render(item) {
                return (
                  <div>
                    <span>{getLabel('', '单位类型') + "："}</span>
                    <span className={`${prefixCls}-itemColor`} > {item.typespan} </span>
                  </div>
                )
              },
              style: { margin: "5px 0" }
            },
            {
              key: 'row3',
              render(item) {
                return (
                  <div>
                    <span>{getLabel('', '当前状态') + "："}</span>
                    <span className={`${prefixCls}-itemColor`} > {item.doc_statusspan} </span>
                  </div>
                )
              },
              style: { margin: "5px 0" }
            },
            {
              key: 'row4',
              render(item) {
                return (
                  <div>
                    <span>{getLabel('', '处理时间') + "："}</span>
                    <span className={`${prefixCls}-itemColor`} > {item.oper_datespan} </span>
                  </div>
                )
              },
              style: { margin: "5px 0" }
            },
            {
              key: 'row5',
              render(item) {
                return (
                  <div>
                    <span>{getLabel('', '处理意见') + "："}</span>
                    <span className={`${prefixCls}-itemColor`} > {item.response_msgspan} </span>
                  </div>
                )
              },
              style: { margin: "5px 0" }
            },
          ],
        },
      ],
    };
    return sendTemplate;
  }

  onRowSelect(selectedDetailRowKeys,c) {
    const { setState, setBackDepart } = this.props.docExchangeStore;
    setState({ selectedDetailRowKeys: selectedDetailRowKeys });
    setBackDepart(c);
  }
  handleVisibleChange = bool => {
    this.setState({
      popVisible: bool
    })
  };
  getBatchBtn = () => {
    const { prefixCls } = this.props;
    const { isSelectedDetailAll, selectedDetailRowKeys, showDetailCheck } = this.props.docExchangeStore;
    const btnDisabled = isSelectedDetailAll ? false : selectedDetailRowKeys.length > 0 ? false : true;
    return (
      <div className={`${prefixCls}-selectedMsg-send`} >
        {!showDetailCheck && <Button type="primary" onClick={() => this.clickBttomBtn('send')} className={`${prefixCls}-btnDisabled`} >
          {getLabel('', "发送其他单位")}
        </Button>}
        {showDetailCheck && <Button disabled={btnDisabled} type="primary" onClick={() => this.clickBttomBtn('back')} className={!btnDisabled ? `${prefixCls}-btnDisabled` : ''} >
          {getLabel('', "批量撤销")}
        </Button>}
      </div>
    )
  }

  clickBttomBtn = (btnType) => {
    const { docExchangeStore, history } = this.props;
    const { setState } = docExchangeStore;
    if (btnType == 'send') {
      history.push(docExchangeStore.sendOtherBrowser.path);
    } else if (btnType == 'back') {
      setState({
        modalVisible: true,
        btnType: 'back'
      });
    }
  }

  onSelect = (node) => {
    const { docExchangeStore } = this.props;
    const { setState } = docExchangeStore;
    this.setState({
      popVisible: false
    });
    setState({
      showDetailCheck: true,
    })
  }
}

export default Main;